<!DOCTYPE html>
<html> 
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div dir=rtl>
<p>Right To Left

<p>Well-formed pair of unicode bidi control characters.
<div>&#x202b;b!&#x202c;</div>
<div>&#x202a;b!&#x202c;</div>

<p>Unpaired unicode bidi control characters.
<div>&#x202b;b!</div>
<div>&#x202a;b!</div>

<p>Empty content inside unicode bidi control characters.
<div>&#x202c;&#x202c;</div>
<div>&#x202a;&#x202a;</div>
<div>&#x202b;&#x202b;</div>

<p>String inside unicode bidi control characters.
<div contenteditable id="test">&#x202c;abc&#x202c;</div>
<div>&#x202a;abc&#x202a;</div>
<div>&#x202b;abc&#x202b;</div>

<p>String around unicode bidi control characters.
<div>def&#x202c;abc&#x202c;</div>
<div>&#x202c;abc&#x202c;def</div>
<div>xyz&#x202c;abc&#x202c;def</div>

<p>Nested unicode bidi control characters.
<div>&#x202a;&#x202a;b!&#x202c;</div>
<div>&#x202b;&#x202b;b!&#x202c;</div>
<div>&#x202c;&#x202c;b!&#x202c;</div>
<div>&#x202c;1&#x202b;c!&#x202c;</div>

<p>Start with different directionality characters.
<div>12&#x202c;&#x202a;1&#x202c;&#x202b</div>
<div>12&#x202c;&#x202a;</div>
<div>&#x660;&#x661;&#x202c;&#x202a;</div>
<div>&#x683;&#x684;&#x202c;&#x202a;</div>
<div>&#x1;&#x202c;&#x202a;</div>
<div>abc&#x202c;&#x202a;</div>
<div>&#x5d0;&#x5d1;&#x202c;&#x202a;</div>
</div>

<div>
<p>Left To Right

<p>Well-formed pair of unicode bidi control characters.
<div>&#x202b;b!&#x202c;</div>
<div>&#x202a;b!&#x202c;</div>

<p>Unpaired unicode bidi control characters.
<div>&#x202b;b!</div>
<div>&#x202a;b!</div>

<p>Empty content inside unicode bidi control characters.
<div>&#x202c;&#x202c;</div>
<div>&#x202a;&#x202a;</div>
<div>&#x202b;&#x202b;</div>

<p>String inside unicode bidi control characters.
<div>&#x202c;abc&#x202c;</div>
<div>&#x202a;abc&#x202a;</div>
<div>&#x202b;abc&#x202b;</div>

<p>String around unicode bidi control characters.
<div>def&#x202c;abc&#x202c;</div>
<div>&#x202c;abc&#x202c;def</div>
<div>xyz&#x202c;abc&#x202c;def</div>

<p>Nested unicode bidi control characters.
<div>&#x202a;&#x202a;b!&#x202c;</div>
<div>&#x202b;&#x202b;b!&#x202c;</div>
<div>&#x202c;&#x202c;b!&#x202c;</div>
<div>&#x202c;1&#x202b;c!&#x202c;</div>

<p>Start with different directionality characters.
<div>12&#x202c;&#x202a;1&#x202c;&#x202b</div>
<div>12&#x202c;&#x202a;</div>
<div>&#x660;&#x661;&#x202c;&#x202a;</div>
<div>&#x683;&#x684;&#x202c;&#x202a;</div>
<div>&#x1;&#x202c;&#x202a;</div>
<div>abc&#x202c;&#x202a;</div>
<div>&#x5d0;&#x5d1;&#x202c;&#x202a;</div>
</div>
<ul id="console" dir=ltr></ul>


<script> 
 
    function log(str)
    {
        var li = document.createElement("li");
        li.appendChild(document.createTextNode(str));
        var console = document.getElementById("console");
        console.appendChild(li);
    }
    
    function assertEqual(message, actual, expected)
    {
        if (actual != expected)
            log("\n" + message + ": Failure, actual: " + actual + "; expected: " + expected);
        else
            log("\n" + message + ": Success");
    }
            
    var test = document.getElementById('test');
    var sel = getSelection();
    sel.collapse(test.firstChild, 3);
    sel.modify("extend", "left", "character");
    assertEqual("test id=test: the right-most character of rendering result of <PDF>abc<PDF> in RTL block should be c", sel.toString(), 'c');
</script> 
</body> 
</html> 
